<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cron Expression Parser</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>在线Cron表达式生成器</h1>
        <div class="tabs">
            <button class="tab-link active" onclick="openTab(event, 'seconds')">秒</button>
            <button class="tab-link" onclick="openTab(event, 'minutes')">分</button>
            <button class="tab-link" onclick="openTab(event, 'hours')">时</button>
            <button class="tab-link" onclick="openTab(event, 'day')">日</button>
            <button class="tab-link" onclick="openTab(event, 'month')">月</button>
            <button class="tab-link" onclick="openTab(event, 'week')">周</button>
            <button class="tab-link" onclick="openTab(event, 'year')">年</button>
        </div>

        <!-- Seconds Tab -->
        <div id="seconds" class="tab-content active">
            <h2>秒</h2>
            <label><input type="radio" name="seconds" value="*" checked> 每秒</label></br>
            <label><input type="radio" name="seconds" value="range"> 周期从 <input type="number" id="seconds-range-start" min="0" max="59" oninput="clearOtherSecondsOptions('range')"> - <input type="number" id="seconds-range-end" min="0" max="59" oninput="clearOtherSecondsOptions('range')"></label></br>            <label><input type="radio" name="seconds" value="interval"> 从 <input type="number" id="seconds-interval-start" min="0" max="59" oninput="clearOtherSecondsOptions('interval')">秒开始, 每 <input type="number" id="seconds-interval" min="1" max="59" oninput="clearOtherSecondsOptions('interval')"> 秒执行一次</label></br>
            <label><input type="radio" name="seconds" value="specific"> 指定</label></br>
            <div id="seconds-specific" class="checkbox-group"></div>
        </div>

        <!-- Minutes Tab -->
        <div id="minutes" class="tab-content">
            <h2>分</h2>
            <label><input type="radio" name="minutes" value="*" checked> 每分钟</label></br>
            <label><input type="radio" name="minutes" value="range"> 周期从 <input type="number" id="minutes-range-start" min="0" max="59" oninput="clearOtherMinutesOptions('range')"> to <input type="number" id="minutes-range-end" min="0" max="59" oninput="clearOtherMinutesOptions('range')">分钟</label></br>
            <label><input type="radio" name="minutes" value="interval"> 从 <input type="number" id="minutes-interval-start" min="0" max="59" oninput="clearOtherMinutesOptions('interval')">分钟开始, 每 <input type="number" id="minutes-interval" min="1" max="59" oninput="clearOtherMinutesOptions('interval')"> 分钟执行一次</label></br>
            <label><input type="radio" name="minutes" value="specific"> 指定</label></br>
            <div id="minutes-specific" class="checkbox-group"></div>
        </div>

        <!-- Hours Tab -->
        <div id="hours" class="tab-content">
            <h2>时</h2>
            <label><input type="radio" name="hours" value="*" checked> 每小时</label></br>
            <label><input type="radio" name="hours" value="range"> 周期从 <input type="number" id="hours-range-start" min="0" max="23" oninput="clearOtherHoursOptions('range')"> - <input type="number" id="hours-range-end" min="0" max="23" oninput="clearOtherHoursOptions('range')"> 小时 </label></br>
            <label><input type="radio" name="hours" value="interval"> 从 <input type="number" id="hours-interval-start" min="0" max="23" oninput="clearOtherHoursOptions('interval')">时开始, 每 <input type="number" id="hours-interval" min="1" max="23" oninput="clearOtherHoursOptions('interval')"> 小时执行一次</label></br>
            <label><input type="radio" name="hours" value="specific"> 指定 </label></br>
            <div id="hours-specific" class="checkbox-group"></div>
        </div>

        <!-- Day Tab -->
        <div id="day" class="tab-content">
            <h2>日</h2>
            <label><input type="radio" name="day" value="*" checked> 每日</label></br>
            <label><input type="radio" name="day" value="range"> 周期从 <input type="number" id="day-range-start" min="1" max="31" oninput="clearOtherDayOptions('range')"> - <input type="number" id="day-range-end" min="1" max="31" oninput="clearOtherDayOptions('range')">日</label></br>
            <label><input type="radio" name="day" value="interval"> 从 <input type="number" id="day-interval-start" min="1" max="31" oninput="clearOtherDayOptions('interval')">日开始, 每 <input type="number" id="day-interval" min="1" max="31" oninput="clearOtherDayOptions('interval')"> 日执行一次</label></br>
            <label><input type="radio" name="day" value="specific"> 指定 </label></br>
            <div id="day-specific" class="checkbox-group"></div>
            <label><input type="radio" name="day" value="ignore"> 不指定 (?)</label></br>
            <label><input type="radio" name="day" value="weekday"> 每月 <input type="number" id="day-weekday" min="1" max="31" placeholder="" oninput="clearOtherDayOptions('weekday')"> 号最近的那个工作日 (W)</label></br>
            <label><input type="radio" name="day" value="last"> 每月最后一天 (L)</label></br>
            <label><input type="radio" name="day" value="calendar"> 每月第 <input type="number" id="day-calendar-nth" min="1" max="31" placeholder="">个工作日 (C)</label></br>
        </div>

        <!-- Month Tab -->
        <div id="month" class="tab-content">
            <h2>月</h2>
            <label><input type="radio" name="month" value="*" checked> 每月 </label></br>
            <label><input type="radio" name="month" value="range"> 周期从 <input type="number" id="month-range-start" min="1" max="12" oninput="clearOtherMonthOptions('range')"> - <input type="number" id="month-range-end" min="1" max="12" oninput="clearOtherMonthOptions('range')"> 月 </label></br>
            <label><input type="radio" name="month" value="interval"> 从 <input type="number" id="month-interval-start" min="1" max="12" oninput="clearOtherMonthOptions('interval')"> 月开始, 每 <input type="number" id="month-interval" min="1" max="12" oninput="clearOtherMonthOptions('interval')"> 月执行一次</label></br>
            <label><input type="radio" name="month" value="specific"> 指定</label></br>
            <div id="month-specific" class="checkbox-group"></div>
        </div>

        <!-- Week Tab -->
        <div id="week" class="tab-content">
            <h2>周</h2>
            <label><input type="radio" name="week" value="*" checked> 每周 </label></br>
            <label><input type="radio" name="week" value="range"> 周期从 <input type="number" id="week-range-start" min="0" max="6" oninput="clearOtherWeekOptions('range')"> - <input type="number" id="week-range-end" min="0" max="6" oninput="clearOtherWeekOptions('range')">周</label></br>
            <label><input type="radio" name="week" value="ignore"> 不指定 (?)</label></br>
            <label><input type="radio" name="week" value="last"> 本月最后一周 (L)</label></br>
            <label><input type="radio" name="week" value="nth"> 第<input type="number" id="week-nth-week" min="1" max="5" placeholder=""> 周的星期 <input type="number" id="week-nth-day" min="0" max="6" placeholder=""> (1#2)</label></br>
            <label><input type="radio" name="week" value="specific"> 指定 </label></br>
            <div id="week-specific" class="checkbox-group"></div></br>
        </div>

        <!-- Year Tab -->
        <div id="year" class="tab-content">
            <h2>年</h2>
            <label><input type="radio" name="year" value="*" checked> 每年 </label></br>
            <label><input type="radio" name="year" value="range"> 周期从
                <input type="number" id="year-range-start" min="1970" max="2099" oninput="clearOtherYearOptions('range')"> - 
                <input type="number" id="year-range-end" min="1970" max="2099" oninput="clearOtherYearOptions('range')">年
            </label>
        </div>

        <!-- Cron Expression Output -->
        <div class="output-section">
            <h2>Cron 表达式</h2>
            <button title="Generate Cron Expression" onclick="generateCron()">生成Cron</button>
            <input type="text" id="cron-expression-output" placeholder="cron表达式" oninput="updateExecutionTimes()">
        </div>

        <!-- Execution Times -->
        <div class="execution-times">
            <h2>最近10次执行时间</h2>
            <div id="execution-times-list"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>